<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.wrap{
				margin: auto;
				height: 1000px;
				width: 1500px;
				/*border: 1px solid #000;*/
				position:relative;
				perspective: 1000px;
				transform-style: preserve-3d;
				background-repeat: no-repeat;
			}
			.wrap div{
				height: 100px;	
				width: 150px;
				box-sizing: border-box;
				position: absolute;
				opacity: 1;
				text-align: center;
				line-height: 150px;
				background: url(https://i.loli.net/2018/10/18/5bc761041f867.jpg);
				background-repeat: no-repeat;
				/*transition: all 1s;*/
				transform-origin: center center ;
			}
			.active{
				opacity: 0;
				transform: rotate(360deg) scale(0);
			}
		</style>
	</head>
	<body>
		<div class="wrap"></div>
		<script>
			function special(elem){
				let picArr = [
					'https://i.loli.net/2018/10/18/5bc761041f867.jpg',
					'https://i.loli.net/2018/10/18/5bc76104334e7.jpg',
					'https://i.loli.net/2018/10/18/5bc76104d8b18.jpg',
					'https://i.loli.net/2018/10/18/5bc76104d9c87.jpg',
					'https://i.loli.net/2018/10/18/5bc76105c5e39.jpg',
					'https://i.loli.net/2018/10/18/5bc76105ed148.jpg',
					'https://i.loli.net/2018/10/18/5bc76106127d0.jpg',
					'https://i.loli.net/2018/10/18/5bc7610624237.jpg',
					'https://i.loli.net/2018/10/18/5bc76106d9bca.jpg'
				]
				let width = 150
				let height = 100
				let num = 0
				let flag = true;
				let canClick = true;
				let effect = '';
				(function sliceImg(ele){
					let wrap = document.querySelector(ele)
					for(let i = 0;i < 10; i++){ 	 //行
						for(let j = 0; j < 10; j++){ //列
							let el = document.createElement('div')
							el.style.top = height*i + 'px'
							el.style.backgroundPositionY = -height*i + 'px'
							el.style.left = width*j + 'px'
							el.style.backgroundPositionX = -width*j + 'px'
	//						el.innerHTML = i + "-" + j
							el.classList.add('stay')
							el.id = i + "-" + j
							wrap.appendChild(el)
						}
					}
					wrap.onclick = nextPic.bind(wrap)
					//点击触发下一张图片
				})(elem)
				
				function nextPic(){
					let wrap = this
					let divs = document.querySelectorAll('.stay')
//					divs[divs.length-1].addEventListener('transitionend',()=>{
//						canClick = true
//					})
					if(canClick)
						canClick = false
					else	
						return 0
					if(flag){
						effect = Math.ceil(Math.random()*13)-1
						for(let [index,one] of divs.entries()){
							let effects = [
								`skew(${random(60)}deg) rotateZ(${random(90)}deg) translateZ(${random(1000)}px)`,
								`scale(0.1)`,
								`scaleX(0.1)`,
								`scaleY(0.1)`,
								`skew(${random(60)}deg) rotateZ(${random(90)}deg) translateZ(${random(1000)}px)`,
								`rotateZ(360deg) scale(0.1)`,
								`rotateZ(360deg) scale(${random(1.5)})`,
								`rotateZ(-360deg) scale(${random(1.5)})`,
								`skew(${random(60)}deg) rotateZ(${random(90)}deg) translateZ(${random(1000)}px)`,
								`rotateZ(-360deg) scale(0.1)`,
								`rotateY(-360deg) scale(0.1)`,
								`rotateX(-360deg) scale(0.1)`,
								`skew(${random(60)}deg) rotateZ(${random(90)}deg) translateZ(${random(1000)}px)`,
							];
							one.style.transition = 'all 1s'						
							one.style.transform = effects[effect];
           					one.style.opacity="0";
						}
						let pic = num + 1 >= picArr.length ? 0 : num + 1
						wrap.style.backgroundImage = `url(${picArr[pic]})`
						flag = false
					}
					setTimeout(function (){
						num++;
						canClick = true
						if(num == picArr.length){
							num = 0
						}
						for(let [index,one] of divs.entries()){
							one.classList.remove('active')
							one.style.transform = ''
							one.style.transition = ''					
							one.style.opacity = ''
							one.style.backgroundImage = `url(${picArr[num]})`
						}
						flag = true
					},1000)
				}
				function random(n){
					return Math.random()*n
				}
				return nextPic
			}
			let check = special('.wrap')
			let timer = setInterval(function(){
//				check()
				document.querySelector('.wrap').click()
			},3000)
			document.querySelector('.wrap').onmouseover = ()=>{
				clearInterval(timer)
			}
			document.querySelector('.wrap').onmouseout = ()=>{
				clearInterval(timer);
				timer = setInterval(function(){
					document.querySelector('.wrap').click()
				},2000)
			}
		</script>
	</body>
</html>
